<template>
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8">{{ currentCategory }}新闻</h1>

    <!-- 新闻列表 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <NewsCard 
        v-for="item in news" 
        :key="item.id" 
        :news-item="item" 
        @toggle-favorite="toggleFavorite"
      />
    </div>

    <!-- 加载更多 -->
    <div class="mt-8 text-center">
      <button 
        @click="loadMoreNews" 
        class="px-6 py-3 bg-blue-500 text-white rounded-full hover:bg-blue-600"
      >
        加载更多
      </button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useNewsStore } from '../store'
import { useFavoritesStore } from '../store'
import NewsCard from '../components/NewsCard.vue'

const route = useRoute()
const newsStore = useNewsStore()
const favoritesStore = useFavoritesStore()
const { news, setNews, currentCategory, setCurrentCategory } = newsStore
const { toggleFavorite } = favoritesStore

// 监听路由参数变化，更新分类新闻
watch(
  () => route.params.type,
  (newType) => {
    setCurrentCategory(newType)
    fetchCategoryNews(newType)
  },
  { immediate: true }
)

// 获取分类新闻数据
const fetchCategoryNews = (category) => {
  // 模拟API请求获取分类新闻
  const mockNews = Array(6).fill().map((_, i) => ({
    id: Date.now() + i,
    title: `${category}新闻标题 ${i+1}`,
    summary: '这是一条分类新闻摘要，包含了该分类下新闻的主要内容和关键点。',
    image: `https://picsum.photos/seed/${category}${i}/400/240`,
    date: new Date(Date.now() - i * 86400000).toLocaleDateString(),
    category
  }))
  setNews(mockNews)
}

// 加载更多新闻
const loadMoreNews = () => {
  const moreNews = Array(3).fill().map((_, i) => ({
    id: Date.now() + i + 1000,
    title: `${currentCategory}新闻标题 ${news.length + i + 1}`,
    summary: '这是一条加载更多的分类新闻摘要，展示无限滚动功能。',
    image: `https://picsum.photos/seed/${currentCategory}${news.length + i}/400/240`,
    date: new Date(Date.now() - (news.length + i) * 86400000).toLocaleDateString(),
    category: currentCategory
  }))
  news.push(...moreNews)
}
</script>